<template>
  <el-config-provider :locale="locale"  >
    <I18n></I18n>
    <router-view v-if="isActiveRoute"  />
<!--    <ApiRouter/>-->
<!--    <Mqtt/>-->
  </el-config-provider>
</template>
<script lang="ts" setup>
import {ref, watch, computed, reactive, toRefs,nextTick,onMounted} from 'vue'
import {getStatic, loadCss} from '@/utils/common'
import iconfontInit from '@/utils/iconfont'
// import {useStore} from 'vuex'
import {useStore} from "@/store";
// import zhLocale from 'element-plus/lib/locale/lang/zh-cn'
// import enLocale from 'element-plus/lib/locale/lang/en'

import zhLocale from 'element-plus/dist/locale/zh-cn.mjs'
import enLocale from 'element-plus/dist/locale/en.mjs'

import {useI18n} from "vue-i18n";
import {I18n} from '@/components/I18n'
// import {useDesignStore} from '@/stores/modules/designStore/designStore'
// import {loadAsyncComponent, setHtmlTheme} from '@/utils'
import {useDarkThemeHook, useThemeOverridesHook, useCode, useLang} from '@/hooks'
// import ApiRouter from '@/pages/components/apiRouter.vue';

// 异步加载组件

// const designStore = useDesignStore()
const data = reactive({
  isActiveRoute: true,
})

const {isActiveRoute} = toRefs(data)

const reload = () => {
  data.isActiveRoute = false;
  nextTick( () => {
    data.isActiveRoute = true;
      })
    }
    // 改变样式
    const changeTheme = () => {
  // designStore.changeTheme()
  // setHtmlTheme()
}

  const locale = ref(zhLocale)
    const store = useStore()

    const lang = computed(() => store.state.user.lang)

    watch(lang, newLang => {

      locale.value = newLang === 'zh' ? zhLocale : enLocale
      reload()
      nextTick(()=>{
        changeTheme()

      })

    },{immediate:true})

    onMounted(() => {
      console.log('进入')
      // getStatic()
      iconfontInit()
    //   //at.alicdn.com/t/c/font_4022387_ky5yn1wze5b.js
    //   loadCss('//at.alicdn.com/t/c/font_4022387_ky5yn1wze5b.js')
    // // 加载 FontAwesome 所有图标，Url由官网提供
    // loadCss('//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css')
})


// export default {
//   data() {
//     return {
//       isActiveRoute: true
//     }
//   },
//   methods: {
//     reload() {
//       this.isActiveRoute = false;
//       this.$nextTick( () => {
//         this.isActiveRoute = true;
//       })
//     }
//   },
//   watch: {
//     '$i18n.locale'(newVal, oldVal) {

//       if(newVal != oldVal) {
//         this.reload()
//       }
//     }
//   },
//   setup() {

//   }
// }
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  height: 100%;
}


</style>
